$popper__arrow-borderWidth: 8px;
$popper-margin: 10px;
$popoverZIndex: 9999;

.br-popover{
  border: 1px solid $content-border-color;
  background: #fff;
  box-shadow: 0 2px 4px 0 rgba(0,0,0,.12), 0 0 6px 0 rgba(0,0,0,.04);
  padding: 10px;
  z-index: $popoverZIndex;

  &[x-placement^="top"]{
    margin-bottom: $popper-margin;

    & .br-popper__arrow{
      bottom: -$popper__arrow-borderWidth;
      border-bottom-width: 0;
      border-top-color: $border-color;

      &::after{
        bottom: 1px;
        margin-left: -$popper__arrow-borderWidth;
        border-bottom-width: 0;
        border-top-color: #fff;
      }
    }
  }

  &[x-placement^="bottom"]{
    margin-top: $popper-margin;

    & .br-popper__arrow{
      top: -$popper__arrow-borderWidth;
      border-top-width: 0;
      border-bottom-color: $border-color;

      &::after{
        top: 1px;
        margin-left: -$popper__arrow-borderWidth;
        border-top-width: 0;
        border-bottom-color: #fff;
      }
    }
  }

  &[x-placement^="right"]{
    margin-left: $popper-margin;

    & .br-popper__arrow{
      left: -$popper__arrow-borderWidth;
      border-left-width: 0;
      border-right-color: $border-color;

      &::after{
        left: 1px;
        margin-top: -$popper__arrow-borderWidth;
        border-left-width: 0;
        border-right-color: #fff;
      }
    }
  }

  &[x-placement^="left"]{
    margin-right: $popper-margin;

    & .br-popper__arrow{
      right: -$popper__arrow-borderWidth;
      border-right-width: 0;
      border-left-color: $border-color;

      &::after{
        right: 1px;
        margin-top: -$popper__arrow-borderWidth;
        border-right-width: 0;
        border-left-color: #fff;
      }
    }
  }

  & .br-popper__arrow,
  & .br-popper__arrow::after{
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: $popper__arrow-borderWidth;
  }
}
